<template>
  <div class="shop-channel-detail">
    <div class="container">
      <div class="model-title">商户渠道信息详情</div>
      <div class="list-box">
        <h2>基本信息</h2>
        <div>
          <el-row>
            <el-col :span="12">
              <div class="grid-content">
                <div class="label-cell">
                  <span>商户姓名：</span>
                  <el-input disabled :value="merchantInfo.merchantName"></el-input>
                </div>
                <div class="label-cell">
                  <span>注册时间：</span>
                  <el-input disabled :value="merchantInfo.createTime"></el-input>
                </div>
                <div class="label-cell">
                  <span>通道密钥：</span>
                  <el-input disabled :value="merchantInfo.encryptKey"></el-input>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <div class="label-cell">
                  <span>绑定手机：</span>
                  <el-input disabled :value="merchantInfo.bindMobile"></el-input>
                </div>
                <div class="label-cell">
                  <span>注册状态：</span>
                  <el-input disabled :value="merchantInfo.registerState"></el-input>
                </div>
                <div class="label-cell">
                  <span>通道编码：</span>
                  <el-input disabled :value="merchantInfo.channelCode"></el-input>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <h2>余额详情</h2>
        <div>
          <el-row>
            <el-col :span="12">
              <div class="grid-content">
                <div class="label-cell">
                  <span>钱包余额：</span>
                  <el-input disabled :value="walletInfo.amount"></el-input>
                </div>
                <div class="label-cell">
                  <span>T0余额：</span>
                  <el-input disabled :value="walletInfo.amountD0"></el-input>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content">
                <div class="label-cell">
                  <span>T1余额：</span>
                  <el-input disabled :value="walletInfo.amountT1"></el-input>
                </div>
                <div class="label-cell">
                  <el-button type="danger" @click="shopIssue">商户下发</el-button>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <h2>费率详情</h2>
        <div>
          <el-row class="cell-box"  v-for="(item ,index) in rateInfo" :key="index">
            <el-col v-if="!!item.channelProductCode" :span="12">
              <div class="grid-content">
                <div class="label-cell">
                  <span>产品类型：</span>
                  <el-input disabled :value="item.channelProductCodeCN"></el-input>
                </div>
                <div class="label-cell">
                  <span>封顶金额：</span>
                  <el-input disabled :value="item.capAmount"></el-input>
                </div>
                <div class="label-cell">
                  <span>银⾏卡类型：</span>
                  <el-input disabled :value="item.cardType"></el-input>
                </div>
                <div class="label-cell">
                  <span>费率或费：</span>
                  <el-input disabled :value="item.feeValue"></el-input>
                </div>
              </div>
            </el-col>
            <el-col v-if="!!item.channelProductCode" :span="12">
              <div class="grid-content">
                <div class="label-cell">
                  <span>产品编码：</span>
                  <el-input disabled :value="item.channelProductCode"></el-input>
                </div>
                <div class="label-cell">
                  <span>业务类型：</span>
                  <el-input disabled :value="item.bizType"></el-input>
                </div>
                <div class="label-cell">
                  <span>状态：</span>
                  <el-input disabled :value="item.status"></el-input>
                </div>
                <div class="label-cell">
                  <span>操作：</span>
                  <el-button
                    :disabled="item.cardType === '借记卡'"
                    @click="handleUpdateRate(item)"
                  >修改费率</el-button>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <el-dialog title="修改商户费率" :visible.sync="dialogShow" class="model-box">
      <el-form ref="rateForm" :model="rateForm" label-width="100px">
        <el-form-item label="商户号">
          <el-input disabled v-model="rateForm.merchantNo"></el-input>
        </el-form-item>
        <el-form-item label="通道产品名称">
          <el-input disabled :value="rateForm.channelProductCodeCN"></el-input>
        </el-form-item>
        <el-form-item label="通道产品号">
          <el-input disabled v-model="rateForm.channelProductCode"></el-input>
        </el-form-item>
        <el-form-item label="卡类型">
          <el-input disabled v-model="rateForm.cardType"></el-input>
        </el-form-item>
        <el-form-item label="费类型">
          <el-input disabled v-model="rateForm.bizType"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-input disabled :value="rateForm.status"></el-input>
        </el-form-item>
        <el-form-item label="费率">
          <el-input v-model="rateForm.feeValue"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleSubmitUpdate" type="success">提交修改</el-button>
          <el-button @click="()=>{dialogShow=false}">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 商户下发 -->
    <el-dialog title="商户下发" :visible.sync="visibleShopIssue">
      <div class="update-box">
        <div  style="padding:10px 0">
          <span style="display:inline-block;width:150px">请输入金额：</span>
          <el-input style="width:220px" v-model="amount"></el-input>
        </div>
        <div style="padding:10px 0">
          <span style="display:inline-block;width:150px">请选择通道：</span>
          <el-select placeholder="请选择通道" v-model="issueChannel">
            <el-option
              v-for="item in channelList"
              :key="item.id"
              :value="item.id"
              :label="item.name+'-'+item.channelParams"
            ></el-option>
          </el-select>
        </div>
         <div style="padding:10px 0">
          <span style="display:inline-block;width:150px">请选择下发方式：</span>
          <el-select placeholder="请选择下发方式" v-model="xfType">
            <el-option
              v-for="item in xfTypeList"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </div>
        <div style="padding:20px;">
          <el-button type="danger" @click="submitShopIssue">确认</el-button>
          <el-button @click="e=>{this.visibleShopIssue=false}">取消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "shop-channel-detail",
  data() {
    return {
      visibleShopIssue: false,
      issueChannel: null,
      amount:0,
      channelList: [],
      dialogShow: false,
      merchantInfo: {},
      rateInfo: {},
      walletInfo: {},
      rateForm: {},
      xfType:'400',
      xfTypeList:[
        {value:'400',label:'D0下发'},
        {value:'402',label:'T1下发'},
      ]
    };
  },
  components: {},
  created() {},
  mounted() {
    this.queryOneForMerchantFeeInfo();
    this.queryMerchantWallet();
    this.getmerchantinfo();
  },
  methods: {
    handleUpdateRate(item = {}) {
      const merchantNo = this.$route.params.merchantNo;
      this.rateForm = { ...item, merchantNo };
      this.dialogShow = true;
    },
    handleSubmitUpdate() {
      const token = sessionStorage.getItem(1);
      const url = `user/freeQtuick/modifyMerchantFeeInfo/${token}`;
      let params = [];
      for (let key in this.rateForm) {
        params.push(`${key}=${this.rateForm[key]}`);
      }
      params = params.join("&");
      this.$Http
        .post(url, params)
        .then(res => {
          if (res.data.resp_code === "000000") {
            this.$message.success("修改费率成功！");
            this.dialogShow = false;
            this.queryOneForMerchantFeeInfo();
          } else {
            this.$message(res.data.resp_message);
          }
        })
        .catch(err => {
          this.$message.error("修改商户费率失败！");
        });
    },
    getmerchantinfo() {
      const url = `user/freeQtuick/getmerchantinfo?merchantNo=${this.$route.params.merchantNo}&channelProductCode=${this.$route.params.channelProductCode}`;
      this.$Http
        .get(url)
        .then(res => {
          if (res.data.resp_code === "000000") {
            this.merchantInfo = res.data.result;
          } else {
            this.$message(res.data.resp_message);
          }
        })
        .catch(err => {
          this.$message.error("获取商户信息失败！");
        });
    },
    queryOneForMerchantFeeInfo() {
      const url = `user/freeQtuick/queryOneForMerchantFeeInfo`;
      const params = `merchantNo=${this.$route.params.merchantNo}`;
      this.$Http
        .post(url, params)
        .then(res => {
          if (res.data.resp_code === "000000") {
            this.rateInfo = res.data.result;
          } else {
            this.$message(res.data.resp_message);
          }
        })
        .catch(err => {
          this.$message.error("获取商户信息失败！");
        });
    },
    queryMerchantWallet() {
      const url = `user/freeQtuick/queryMerchantWallet?merchantNo=${
        this.$route.params.merchantNo
      }`;
      this.$Http
        .get(url)
        .then(res => {
          if (res.data.resp_code === "000000") {
            this.walletInfo = res.data.result;
          } else {
            this.$message(res.data.resp_message);
          }
        })
        .catch(err => {
          this.$message.error("获取商户余额信息失败！");
        });
    },
    shopIssue() {
      this.visibleShopIssue = true;
      // 获取通道列表
      this.getChannelList();
    },
    submitShopIssue() {
      if (
        this.issueChannel === null ||
        this.issueChannel === "" ||
        this.issueChannel === undefined
      ) {
        this.$message.warning("请先选择通道！");
        return;
      }
      if (
        this.xfType === null ||
        this.xfType === "" ||
        this.xfType === undefined
      ) {
        this.$message.warning("请先选择下发方式！");
        return;
      }
      if (
        this.merchantInfo.userId === null ||
        this.merchantInfo.userId === "" ||
        this.merchantInfo.userId === undefined
      ) {
        this.$message.warning("商户信息有误！");
        return;
      }
      const url = `paymentchannel/freeQuick/repayment?userId=${this.merchantInfo.userId}&channelCode=${this.issueChannel}&xfType=${this.xfType}&amount=${this.amount}`;
      this.$Http
        .post(url)
        .then(res => {
          this.visibleShopIssue = false;
          if (res.data.resp_code === "000000") {
            this.$message.success("下发成功！");
          } else {
            this.$message.warning(res.data.resp_message);
          }
        })
        .catch(err => {
          this.$message.error("服务器繁忙！请稍候再试");
        });
    },
    getChannelList() {
      let url = `user/channel/query/all`;
      this.$Http
        .post(url, ``)
        .then(res => {
          if (res.data.resp_code === "000000") {
            this.channelList = res.data.result || [];
          } else {
            this.$notify.info({
              title: "提示",
              message: res.data.resp_message
            });
          }
        })
        .catch(err => {
          this.$notify.error({
            title: "提示",
            message: "获取通道信息失败！"
          });
        });
    }
  }
};
</script>
<style scoped>
.list-box {
  padding: 20px 10px;
}
.list-box h2 {
  background-color: #f5faf7;
  padding: 10px;
}
.grid-content {
  padding: 20px;
}
.label-cell {
  display: flex;
  padding: 10px 0;
  align-items: center;
}
.label-cell > span {
  display: inline-block;
  width: 120px;
}
.cell-box {
  border: 1px solid #eee;
  padding: 16px;
  margin: 20px 0;
}
</style>